<template>
  <div class="ui_order" style="padding-top:46px">
    <van-nav-bar title="订单详情" left-arrow fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
      <!-- <span style="color: #333;" slot="right">客服</span> -->
    </van-nav-bar>
    <div class="top">
      <!-- 已完成订单详情 状态 -->
      <div class="a_top" @click="show=true">
        <div class="box box1">
          <div class="box_l">浙江省杭州市拱墅区相符街道余杭塘路478号海蓝创智天地505</div>
          <div class="box_r">普通订单</div>
        </div>
        <div class="box box2">
          <div class="box_l">
            <div class="d1">崔永元</div>
          </div>
          <div class="box_r">
            <span>123456789410</span>
          </div>
        </div>
        <!-- 历史订单已卖出详情状态 -->
        <div class="box11" style="display:none;">
          <div>
            <span>点编号</span>
            <span class="s1">0007</span>
          </div>
          <div>
            <span>点名称</span>
            <span class="s1">海蓝回收站</span>
          </div>
          <div class="d3">
            <div>
              <span>联系方式</span>
              <span class="s2">12345678901</span>
            </div>
            <div>
              <button>拨打电话</button>
            </div>
          </div>
        </div>
        
      </div>
      <div class="b_top">
        <div>订单详情</div>
        <div class="box" style="margin:5px 0px;">
          <div class="box_l">照片</div>
          <div class="box_r">
            <img class="img" src="../../asset/images/1.png" alt="" srcset="">
          </div>
        </div>
        <div class="box">
          <div class="box_l">备注：</div>
          <div class="box_r">请电话联系我</div>
        </div>
      </div>
      <div class="c_top">
        <div class="box" v-for="item in list" :key="item.id">
          <div class="box_l">
            <img class="img" :src="item.img" alt="" srcset="">
          </div>
          <div class="box_r">
            <p class="p1">{{item.title}}</p>
            <p class="p2">{{item.price}}</p>
            <p class="p3">重量：{{item.weight}} 总计：{{item.total}}元</p>
          </div>
        </div>
      </div>
      <div class="d_top">
        <div class="box_l">总计金额</div>
        <div class="box_r">￥88元</div>
      </div>
    </div>
    <van-popup class="popup" v-model="show">
      <div class="popup_header">
        <i class="iconfont icon-guanbi" @click="show=false"></i>
      </div>
      <div class="steps">
        <div class="step">
          <div class="step_l">
            <p class="p1">08.08</p>
            <p class="p2">12:12</p>
          </div>
          <div class="step_c">
            <div class="step_circle"></div>
            <div class="step_line"></div>
          </div>
          <div class="step_r">订单完成-感谢为您服务</div>
        </div>
        <div class="step">
          <div class="step_l">
            <p class="p1">08.08</p>
            <p class="p2">12:12</p>
          </div>
          <div class="step_c">
            <div class="step_circle"></div>
            <div class="step_line"></div>
          </div>
          <div class="step_r">订单完成-感谢为您服务订单完成-感谢为您服务订单完成-感谢为您服务订单完成-感谢为您服务订单完成-感谢为您服务</div>
        </div>
        <div class="step">
          <div class="step_l">
            <p class="p1">08.08</p>
            <p class="p2">12:12</p>
          </div>
          <div class="step_c">
            <div class="step_circle"></div>
            <div class="step_line"></div>
          </div>
          <div class="step_r">订单完成-感谢为您服务</div>
        </div>
        <div class="step">
          <div class="step_l">
            <p class="p1">08.08</p>
            <p class="p2">12:12</p>
          </div>
          <div class="step_c">
            <div class="step_circle"></div>
            <!-- <div class="step_line"></div> -->
          </div>
          <div class="step_r">订单完成-感谢为您服务</div>
        </div>
      </div>
    </van-popup>
    <div class="list">
      <div class="box">
        <div class="box_l">支付方式</div>
        <div class="box_r">线上结算</div>
      </div>
      <div class="box">
        <div class="box_l">支付时间</div>
        <div class="box_r">2018.08.08 12:12:12</div>
      </div>
      <div class="box">
        <div class="box_l">订单编号</div>
        <div class="box_r">
          <span>88888888888888</span>
          <van-button size="small" class="btn" @click="copy('88888888888888')">复制</van-button>
        </div>
      </div>
      <div class="box">
        <div class="box_l">订单时间</div>
        <div class="box_r">2018.08.08 12:12:12</div>
      </div>
    </div>
    <!-- <div class="list">
      <div class="box">
        <div class="box_l">服务人员 </div>
        <div class="box_r">王大毛</div>
      </div>
      <div class="box">
        <div class="box_l">联系方式</div>
        <div class="box_r">
          <span>18800000000</span>
          <van-button size="small" class="btn"  tag="a" href="tel:18688888888" target="_blank">拨打电话</van-button>
        </div>
      </div>
    </div>
    <div class="address">
      <div class="box">
        <div class="box_l">崔永元</div>
        <div class="box_r">18800000000</div>
      </div>
      <div>浙江省杭州市拱墅区祥符街道余杭塘路478号海蓝创智天地505</div>
    </div>
    <div class="bottom">
      <van-button size="small" class="btn">删除订单</van-button>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      list:[
        {
          img:require("../../asset/images/1.png"),
          title:'报纸请预先折叠，并用绳子捆扎。',
          price:'1元/斤',
          weight:'44',
          total:44
        },
        {
          img:require("../../asset/images/1.png"),
          title:'报纸请预先折叠，并用绳子捆扎。',
          price:'1元/斤',
          weight:'44',
          total:44
        }
      ]
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    copy(e) {
      console.log(e);
      window.clipboardData.setData("text", "454554");
    }
  }
};
</script>

<style lang="less" scoped>
.ui_order {
  .top {
    margin-top: 30px;
    background-color: #fff;
    .a_top {
      padding: 30px;
      border-bottom: 1px solid #e1e1e1;
      .box {
        display: flex;
      }
      .box1 {
        font-size: 28px;
        .box_l {
          flex: 1; 
          color: #333;
        }
        .box_r {
          color: #4993ff;
        }
      }
      .box2 {
        .box_l {
          flex: 1;
          .d1 {
            padding-top:5px;
            font-size: 28px;
          }
          .d2 {
            color: #999;
          }
        }
        .box_r {
          .iconfont {
            line-height: 48px;
            font-size: 24px;
            color: #999;
          }
        }
      }
      // 历史订单已卖出详情 头部样式
      .box11{
        color:#5c5c5c;
        font-size:28px;
        .s1{
          margin-left:40px;
          color:#333;
        }
        .s2{
          margin:0px 200px 0 10px;
          color:#333;
        }
        button{
          width:138px;
          height:42px;
          border-radius: 50px;
          border:1px solid #f1f1f1;
          background:none;
          font-size:24px; 
        }
        .d3{
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .b_top {
      padding: 20px;
      border-bottom: 1px solid #e1e1e1;
      .box {
        display: flex;
        .box_l {
          width: 75px;
          color: #5c5c5c;
        }
        .box_r {
          flex: 1;
          color: #333;
          .img {
            display: block;
            width: 120px;
          }
        }
      }
    }
    .c_top {
      padding: 20px;
      border-bottom: 1px solid #e1e1e1;
      .box {
        display: flex;
        &:not(:first-child) {
          margin-top: 20px;
        }
        .box_l {
          width: 140px;
          .img {
            display: block;
            width: 120px;
          }
        }
        .box_r {
          flex: 1;
          p {
            margin: 0;
            &.p1 {
              color: #333;
            }
            &.p2 {
              color: #999;
            }
            &.p3 {
              text-align: right;
              color: #333;
            }
          }
        }
      }
    }
    .d_top {
      padding: 20px;
      display: flex;
      .box_l {
        color: #333;
      }
      .box_r {
        flex: 1;
        text-align: right;
        color: #f0250f;
      }
    }
  }
  .popup {
    width: 620px;
    padding: 30px;
    border-radius: 20px;
    overflow: hidden;
    .popup_header {
      height: 55px;
      padding-bottom: 25px;
      text-align: right;
      .iconfont {
        font-size: 30px;
      }
    }
    .steps {
      .step {
        display: flex;
        color: #999;
        line-height: 1;
        .step_l {
          width: 70px;
          padding-bottom: 45px;
          text-align: center;
          p {
            margin: 0;
            &.p1 {
              color: #5c5c5c;
            }
            &.p2 {
              font-size: 20px;
            }
          }
        }
        .step_c {
          position: relative;
          width: 45px;
          .step_circle {
            width: 12px;
            height: 12px;
            margin: 11px auto;
            border-radius: 12px;
            background-color: #999;
          }
          .step_line {
            position: absolute;
            top: 11px;
            left: 50%;
            margin-left: 0.5px;
            width: 1px;
            height: 100%;
            background-color: #c5c5c5;
            z-index: -1;
          }
        }
        .step_r {
          flex: 1;
          padding-bottom: 45px;
          font-size: 28px;
          line-height: 44px;
        }
      }
    }
  }
  .list {
    margin-top: 20px;
    padding: 30px;
    background-color: #fff;
    .box {
      display: flex;
      .box_l {
        padding-right: 20px;
        color: #999;
      }
      .box_r {
        flex: 1;
        color: #5c5c5c;
        .btn {
          float: right;
          //width: 138px;
          height: 42px;
          line-height: 42px;
          border-radius: 21px;
        }
      }
    }
  }
  .address {
    margin-top: 20px;
    padding: 30px;
    color: #5c5c5c;
    background-color: #fff;
    .box {
      display: flex;
      .box_l {
        flex: 1;
      }
    }
  }
  .bottom {
    margin-top: 20px;
    padding: 30px;
    background-color: #fff;
    text-align: right;
    .btn {
      //width: 132px;
      height: 56px;
      font-size: 24px;
      line-height: 56px;
      border-radius: 28px;
      color: #333;
    }
  }
}
</style>

